<template>
  <div>
    <nav-bar>
      <div slot="center">注册</div>
    </nav-bar>
    <div class="login-container">
      <van-nav-bar
        class="app-nav-bar"
        title="注册"
        left-arrow
        @click-left="$router.back()"
      />
      <van-form
        class="van-form"
        :show-error="false"
        :show-error-message="false"
        @submit="register"
        @failed="onFailed"
      >
        <van-field
          clearable
          v-model="user.usercode"
          label="员工编号"
          left-icon="contact"
          placeholder="请输入员工编号"
          :rules="formRules.usercode"
          name="员工编号"
        />
       
        <van-field
          v-model="user.password"
          clearable
          label="密码"
          left-icon="description"
          placeholder="请输入6位数字密码"
          :rules="formRules.password"
          name="密码"
        />
         <van-field
          v-model="user.username"
          label="用户名"
          left-icon="phone-o"
          placeholder="请输入用户名"
          :rules="formRules.username"
          name="用户名"
        />
        <div class="login-btn-wrap">
          <van-button class="login-btn" type="info" block>点击注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/NavBar.vue'
import { userRegister } from "../../api/user.js";
export default {
  name: "LoginIndex",
  components: {
    NavBar,
  },
  data() {
    return {
      testSource: {
        DataTable: {
          diffgram: {
            DocumentElement: {
              Table: {},
            },
          },
        },
      },
      user: {
        username: "",
        password: "",
        usercode: "",
      },
      formRules: {
        password: [
          { required: true, message: "请输入密码" },
          { pattern: /^\d{6}$/, message: "请输入六位数密码" },
        ],
        usercode: [{ required: true, message: "请输入员工编号" }],
        username: [{ required: true, message: "请输入用户名" }]
      },
    };
  },
  methods: {
    register() {
      userRegister(this.user)
        .then((res) => {
          if (res.data.errors) {
            this.$toast.fail(res.data.errors[0].msg);
          } else {
            this.$toast.success("注册成功,请登录！");
            this.$router.back();
          }
        })
        .catch((err) => {
          this.$toast.fail(err.errors[0].msg);
        });
    },
    onFailed(err) {
      if (err.errors[0]) {
        this.$toast({
          message: err.errors[0].message, // 提示消息
          position: "top", // 防止手机键盘太高看不见提示消息
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.login-container {
  padding-top: 145px;
  .send-btn {
    width: 76px;
    height: 23px;
    background-color: #ededed;
    border: none;
    .van-button__text {
      font-size: 11px;
      color: #666666;
    }
  }
  .login-btn-wrap {
    padding: 26px 16px;
    .login-btn {
      background-color: #066ef4;
      border: none;
      .van-button__text {
        font-size: 16px;
      }
    }
  }
}
</style>
